<template>
    <div class="flex items-center p-4">
        <el-checkbox v-model="checked" size="large" />
        <div class="flex items-center justify-between flex-1 ml-4">
            <div class="flex items-center">
                <el-image style="width: 100px; height: 100px" :src="img" fit="cover" />
                <div class="ml-4">
                    <div class="text-lg">
                        {{ name }}
                    </div>
                    <div class="font-semibold">
                        <span class="text-lg text-orange-600">￥{{ price }}</span
                        ><span class="text-sm">/{{ spec }}</span>
                    </div>
                </div>
            </div>

            <el-input-number v-model="num" :min="0" :max="10" @change="handleChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    id: string
    name: string
    img: string
    price: string
    spec: string
}>()
const num = defineModel('num', { default: 1 })
const checked = defineModel('checked', { default: false })
const emits = defineEmits<{
    changeNum: []
}>()
const handleChange = (val) => {
    console.log(val)
    if (val === 0) {
        emits('delete', props.id)
    } else {
        emits('changeNum')
    }
}
</script>

<style scoped></style>
